<template>

    <el-main>
        <h1>欢迎您：{{this.names}}</h1>
        <el-button type="button" @click="qian">前端</el-button>
        <el-button type="button" @click="hou">后端</el-button>
        <el-button type="button" @click="kai">开发</el-button>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="内容">
                <el-input v-model="form.name"></el-input>
                <el-button type="button" @click="cha">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="name"
                    label="内容"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="total"
                    label="标题"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="ctime"
                    label="创建时间">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="xiang(scope.$index, scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[1, 2, 3, 4]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </el-main>
</template>

<script>
    export default {
        name: "Wen",
        data(){
            return{
                names:sessionStorage.getItem("username"),
                tableData:[],
                current:1,
                size:3,
                total:0,
                form:{
                name:'',
            }
            }
        },
        methods:{
            qian(){
                this.axios.get("http://localhost:9999/api/controller/wen/list",{
                    params:{
                        name:'开发',
                        current:this.current,
                        size:this.size,
                    }
                }).then((response) => {
                    console.log(response.data)
                    this.tableData=response.data.data.records;
                    this.total=response.data.data.total;
                })
            },
            hou(){
                this.axios.get("http://localhost:9999/api/controller/wen/list",{
                    params:{
                        name:'服务',
                        current:this.current,
                        size:this.size,
                    }
                }).then((response) => {
                    console.log(response.data)
                    this.tableData=response.data.data.records;
                    this.total=response.data.data.total;
                })
            },
            kai(){
                this.axios.get("http://localhost:9999/api/controller/wen/list",{
                    params:{
                        name:'注册',
                        current:this.current,
                        size:this.size,
                    }
                }).then((response) => {
                    console.log(response.data)
                    this.tableData=response.data.data.records;
                    this.total=response.data.data.total;
                })
            },
            cha(){
                this.qian();
            },
            xiang(){
               this.$router.push("/Xiang")
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.size=val;
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.current=val;
            }
        }
    }
</script>
